<template>
	<view class="record">
		<cu-custom bgColor="bg-gradual-orange" :isBack="true">
			<block slot="content">兑换记录</block>
		</cu-custom>
		<view class="record-top">
			<image src="../../../static/order-record-top.png"></image>
		</view>
		<view class="record-list">
			<view class="list-item" :record="item" v-for="item in record" :key="item.pid">
				<view class="order-info">
					<image v-if="item.img" :src='item.img' class="product-img"></image>
					<view class="product-info">
						<text class="product-name">{{item.name}}</text>
						<text class="product-price">￥ {{item.new_money}}</text>
						<text class="product-original">￥ {{item.old_money}}</text>
					</view>
				</view>
				<view class="order-status">
					<text class="status-icon">已兑换</text>
				</view>
			</view>
			<uni-load-more :status="more" v-if="record"></uni-load-more>
		</view>
	</view>
</template>

<script>
	import {mapState,mapMutations} from 'vuex';
	import shops from '@/api/shop';
	import uniLoadMore from "@/components/uni-load-more/uni-load-more.vue"
	export default {
		data() {
			return {
				page: 1,
				more: 'more',
				limit: 10,
				record: [],
				flag: false,
			}
		},
		computed: {
			...mapState(['userInfo','imgHost']),
		},
		onLoad: function(option) {
			// this.pid = option.pid;
			this.getRecord();
		},
		onShow(){
			this.getRecord();
		},
		components: {uniLoadMore},
		onReachBottom() {
			if (this.more !== 'noMore') {
				this.more = 'loading'
				this.page++;
				this.getRecord();
			}
		},
		onPageScroll(e) {
			if (e.scrollTop > 600) { //当距离大于600时显示回到顶部按钮
				this.flag = true
			} else { //当距离小于600时隐藏回到顶部按钮
				this.flag = false
			}
		},
		methods: {
			async getRecord() {
				let res = await shops.orderRrcord({
					limit: this.limit,
					page: this.page,
				});
				if (res.data.length <= 0) {
					this.more = 'noMore';
				} else {
					this.more = 'more';
				}
				if (res.code == 1) {
					// this.record = this.record.concat(res.data)
					this.record = res.data?res.data:this.record.concat(res.data)
					console.log(res.data);
				} else {
					uni.showModal({
						title: '提示',
						content: res.msg,
						success: function(res) {
							if (res.confirm) {
								console.log('用户点击确定');
							} else if (res.cancel) {
								console.log('用户点击取消');
							}
						}
					});
				}
			},
		}
	}
</script>

<style lang="less">
	.record {
		background-color: #f3f3f3;
		font-family: "Noto Sans SC";
		font-size: 24.8rpx;
		color: #5b5b5b;
		margin-bottom: 30rpx;

		.record-top {
			height: 215rpx;

			image {
				width: 100%;
				height: 215rpx;
			}

			margin-bottom: 15rpx;
		}

		.record-list {
			background-color: #f3f3f3;

			.list-item {
				height: 270rpx;
				padding: 0 40rpx;
				margin-bottom: 15rpx;
				background-color: #ffffff;

				.order-info {
					padding-top: 40rpx;

					.product-img {
						width: 200rpx;
						height: 165rpx;
						float: left;
						margin: 0 50rpx 0 10rpx;
					}

					.product-info {
						color: #5b5b5b;
						font-size: 25rpx;
						font-family: "Noto Sans SC";

						text {
							width: 410rpx;
							display: inline-block;

						}

						.product-name {
							font-weight: 600;
						}

						.product-price {
							color: #ff433d;
							font-size: 32rpx;
							font-weight: 600;
							height: 80rpx;
							line-height: 80rpx;
						}

						.product-original {
							color: #858585;
							font-size: 25rpx;
							text-decoration: line-through;
						}

					}
				}

				.order-status {
					height: 50rpx;
					line-height: 50rpx;

					.status-icon {
						float: right;
						width: 120rpx;
						height: 50rpx;
						font-size: 20rpx;
						color: #ffffff;
						background-color: #ff492c;
						border-radius: 15rpx;
						text-align: center;
					}
				}
			}
		}
	}
</style>
